<template>
  <el-dialog title="选择物料" v-model="isShow" width="1000" @open="dialogOpenAction" @close="dialogCloseAction">
    <el-input style="width: 380px" :prefix-icon="Search" v-model="dataQuery.name" clearable placeholder="请输入物料名称">
      <template #append><el-button type="primary" @click="queryAction">查询</el-button></template>
    </el-input>
    <el-table style="margin-top: 20px" ref="tableRef" :data="tableList" border @selection-change="handleSelectionChange">
      <el-table-column align="center" type="selection" width="55" />
      <el-table-column align="center" label="物料编码" prop="fullCode" />
      <el-table-column align="center" label="产品名称" prop="name" />
      <el-table-column align="center" label="物料分组" prop="groupName" />
      <el-table-column align="center" label="规格型号" prop="specModel" />
      <el-table-column align="center" label="物料属性">
        <template #default="scope">
          {{ selectDictLabel(matter_properties, scope.row.properties) }}
        </template>
      </el-table-column>
    </el-table>
    <pagination
      v-show="tableTotal > 0"
      :total="tableTotal"
      v-model:page="dataQuery.page"
      v-model:limit="dataQuery.size"
      @pagination="getTableList"
    />
    <template #footer>
      <span>
        <el-button @click="isShow = false">取消</el-button>
        <el-button type="primary" @click="selectDoneAction">确认</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script setup>
import { Search } from "@element-plus/icons-vue";
import { pageBasicMatterApi } from "@/api/system";
import { useTableSelect } from "@/hooks/tableSelect";
import { selectDictLabel } from "@/utils/ruoyi";
import { getCurrentInstance, ref, toRefs } from "vue";
import Pagination from "@/components/Pagination";

const { proxy } = getCurrentInstance();
const { matter_properties } = toRefs(proxy.useDict("matter_properties"));

const emit = defineEmits(["update:modelValue", "selectDone"]);
const props = defineProps({
  modelValue: {
    type: Boolean,
    default: false,
  },
  properties: {
    type: Number,
    default: undefined,
  },
});

const isShow = ref(false);

const dataQuery = ref({
  page: 1,
  size: 10,
  dataStatus: 3,
  disableStatus: 1,
  name: undefined,
});
const tableList = ref([]);
const tableTotal = ref(0);

const queryReset = () => {
  dataQuery.value = {
    page: 1,
    size: 10,
    dataStatus: 3,
    disableStatus: 1,
    name: undefined,
  };
  tableList.value = [];
};

/** dialog打开 */
const dialogOpenAction = () => {
  queryReset();
  getTableList();
};

/** dialog关闭 */
const dialogCloseAction = () => {
  emit("update:modelValue", false);
};

/** 获取产品列表 */
const getTableList = async () => {
  const res = await pageBasicMatterApi(dataQuery.value);
  tableList.value = res.data.data;
  tableTotal.value = res.data.total;
};

/** 点击查询 */
const queryAction = () => {
  dataQuery.value.page = 1;
  getTableList();
};

/** table单选操作 */
const { tableRef, selectTableRows, handleSelectionChange } = useTableSelect();

/** 选择完成 */
const selectDoneAction = () => {
  if (selectTableRows.value.length == 0) {
    proxy?.$modal.msgError("请选择物料");
  } else {
    const matterList = JSON.parse(JSON.stringify(selectTableRows.value));
    emit("selectDone", matterList);
    isShow.value = false;
  }
};

watchEffect(() => {
  isShow.value = props.modelValue;
});
</script>

<style lang="scss" scoped></style>
